<template>
  <el-dialog title="新增年检工单" :visible.sync="open" width="800px" append-to-body>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="rght" label-width="130px">
      <el-row :gutter="24" style="display: flex; flex-wrap: wrap">
        <el-col :span="12">
          <el-form-item label="车架号:" prop="vinNo">
            <el-autocomplete v-model.trim="ruleForm.vinNo" :fetch-suggestions="requireQuerySearchAsync"
                             placeholder="请输入车牌号" :trigger-on-focus="false" @select="handleSelect">
              <template slot-scope="{ item }">
                <div class="product-item">
                  <div class="name">
                    <span>{{ item.vinNo }}</span>
                  </div>
                </div>
              </template>
            </el-autocomplete>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号:" prop="carNo">
            <el-input v-model="ruleForm.carNo" disabled size="mini"/>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="品牌/车系/车型:" prop="brandName">
            <div style="display: flex">
              <el-input v-model="ruleForm.aaa" disabled/>
              <!--              <el-input v-model="ruleForm.seriesName" disabled/>-->
              <!--              <el-input v-model="ruleForm.brandName" disabled/>-->
            </div>

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车辆产权:" prop="propertyRightName">
            <el-input v-model="ruleForm.propertyRightName" disabled size="mini"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆归属:" prop="ascription">
            <el-input v-model="ruleForm.ascription" disabled size="mini"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车辆运营:" prop="operationsName">
            <el-input v-model="ruleForm.operationsName" disabled size="mini"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆大区:" prop="region">
            <el-input v-model="ruleForm.region" disabled size="mini"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="订单编号:" prop="contractReportNumber">
            <el-input v-model="ruleForm.contractReportNumber" disabled size="mini"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称:" prop="customerName">
            <el-input v-model="ruleForm.customerName" disabled size="mini"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="产品类型:" prop="contractName">
            <el-input v-model="ruleForm.contractName" disabled size="mini"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆性质:" prop="carNatName">
            <el-input v-model="ruleForm.carNatName" disabled size="mini"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车辆状态:" prop="businessName">
            <el-input v-model="ruleForm.businessName" disabled size="mini"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上次年检到期日:" prop="lastInspectionTime">
            <el-date-picker v-model="ruleForm.lastInspectionTime" type="date" placeholder="请选择上次年检到期日"
                            value-format='yyyy-MM-dd'
                            style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="年检到期日:" prop="inspectionLastTime">
            <el-date-picker v-model="ruleForm.inspectionLastTime" type="date" placeholder="请选择年检到期日"
                            value-format='yyyy-MM-dd'
                            style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单类型:" prop="workOrderName">
            <el-input v-model="ruleForm.workOrderName" disabled size="mini"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getInspectVinNo,
  submitCarWorkOrder,
  getVinNo, findCarOrderVoByCarId
} from "@/api/cwgd/addCarList.js";

export default {
  name: 'addDialog',//新增
  dicts: ['car_business_type', 'quota_rent_type', 'car_nature'],
  computed: {},
  watch: {},
  data() {
    return {
      open: false,
      ruleForm: {
        vinNo: "",
        carNo: "",
        carId: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        propertyRightName: "",
        ascription: "",
        operationsName: '',
        region: '',
        regionId: '',
        contractReportNumber: "",
        customerName: "",
        contractType: "",
        contractName: "",
        carNature: "",
        carNatName: "",
        businessType: "",
        businessName: "",
        lastInspectionTime: "",
        workOrderType: '',
        workOrderName: '年检工单',
        aaa: '',
        orderId: ''
      },
      rules: {
        lastInspectionTime: [{required: true, message: "请选择时间", trigger: "change"}],
        vinNo: [{required: true, message: "请输入车架号", trigger: "blur"}],
        carNo: [{required: true, message: "请输入车牌号", trigger: "blur"}],
        contractReportNumber: [{required: true, message: "请输入订单编号", trigger: "blur"}],
        contractType: [{required: true, message: "请输入产品类型", trigger: "blur"}],
        contractName: [{required: true, message: "请输入合同名称", trigger: "blur"}],
        carNature: [{required: true, message: "请输入车辆性质", trigger: "blur"}],
        propertyRightName: [{required: true, message: "请输入车辆产权", trigger: "blur"}],
        ascription: [{required: true, message: "请输入车辆归属", trigger: "blur"}],
        operationsName: [{required: true, message: "请输入车辆运营", trigger: "blur"}],
        region: [{required: true, message: "请输入车辆大区", trigger: "blur"}],
        customerName: [{required: true, message: "请输入客户名称", trigger: "blur"}],
        carNatName: [{required: true, message: "请输入车辆性质", trigger: "blur"}],
        inspectionLastTime:[{required: true, message: "请选择年检到期日", trigger: "blur"}]
      },
      linkageList: [],
      carNoList: [],
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleOpen(val) {
      this.ruleForm = {
        vinNo: "",
        carNo: "",
        carId: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        propertyRightName: "",
        ascription: "",
        operationsName: '',
        region: '',
        regionId: '',
        contractReportNumber: "",
        customerName: "",
        contractType: "",
        contractName: "",
        carNature: "",
        carNatName: "",
        businessType: "",
        businessName: "",
        lastInspectionTime: "",
        workOrderType: '',
        workOrderName: '年检工单',
        aaa: '',
        orderId: ''
      };
      this.ruleForm.workOrderType = val
      this.open = true;
    },

    cancel() {
      this.ruleForm = {
        vinNo: "",
        carNo: "",
        carId: "",
        modelName: "",
        seriesName: "",
        brandName: "",
        propertyRightName: "",
        ascription: "",
        operationsName: '',
        region: '',
        regionId: '',
        contractReportNumber: "",
        customerName: "",
        contractType: "",
        contractName: "",
        carNature: "",
        carNatName: "",
        businessType: "",
        businessName: "",
        lastInspectionTime: "",
        workOrderType: '',
        workOrderName: '年检工单',
        aaa: '',
        orderId: ''
      };
      this.linkageList = [];
      this.open = false;
    },

    async requireQuerySearchAsync(queryString, cb) {

      const res = await getVinNo(queryString);
      if (res.code === 200) {
        this.carNoList = res.data;
      } else {
        this.carNoList = [];
      }
      if (this.carNoList.length === 0) {
        this.ruleForm.vinNo = ''
      }
      let results = this.carNoList;
      cb(results);
    },

    handleSelect(val) {
      this.handleClear()
      if (val) {
        this.ruleForm.carNo = val.carNo
        this.ruleForm.vinNo = val.vinNo
        this.ruleForm.aaa = `${val.modelName}/${val.seriesName}/${val.seriesName}`
        this.ruleForm.modelName = val.modelName
        this.ruleForm.seriesName = val.seriesName
        this.ruleForm.brandName = val.brandName
        this.ruleForm.propertyRightName = val.propertyRightName
        this.ruleForm.carId = val.carId

        this.ruleForm.businessType = val.businessType
        this.ruleForm.businessName = this.dict.type.car_business_type.map(a => {
          if (val.businessType === a.value) {
            return a.label
          }
        }).filter(a => a)[0]

        findCarOrderVoByCarId(val.carId).then(res => {
          if (res.code === 200) {
            const obj = res.data
            this.ruleForm.orderCode = obj?.orderCode
            this.ruleForm.customerName = obj?.customerName
            this.ruleForm.ascription = obj?.ascription
            this.ruleForm.ascriptionId = obj?.ascriptionId
            this.ruleForm.contractReportNumber = obj?.contractReportNumber
            this.ruleForm.procurementReportNumber = obj?.procurementReportNumber
            this.ruleForm.orderChildId = obj?.orderChildId
            this.ruleForm.contractNo = obj?.contractNo
            this.ruleForm.contractType = obj?.contractType
            this.ruleForm.contractName = this.dict.type.quota_rent_type.map(a => {
              if (obj?.contractType == a.value) {
                return a.label
              }
            }).filter(a => a)[0]

            this.ruleForm.operationsName = obj?.operationsName
            this.ruleForm.region = obj?.region
            this.ruleForm.regionId = obj?.regionId
            this.ruleForm.orderId = obj?.orderChildId
            this.ruleForm.carNature = obj?.carNature
            this.ruleForm.carNatName = this.dict.type.car_nature.map(a => {
              if (obj?.carNature == a.value) {
                return a.label
              }
            }).filter(a => a)[0]
          }
        })


      }
    },

    handleClear(){
      for(let key in this.ruleForm){
        if(key !== 'vinNo' && key !== 'workOrderType' && key !== 'workOrderName'){
          this.ruleForm[key]= ''
        }
      }
    },


    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          submitCarWorkOrder(this.ruleForm).then((res) => {
            if (res.code === 200) {
              this.$emit('change')
              this.$message.success('新增成功')
              this.open = false;
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang=""></style>


